<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" type="image/png" href="../../static/favicon.ico" />

    <!-- 样式文件 -->
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/picker.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/userData.css" />

    <style>
        .page-bd ul li {
            margin: .2133rem .32rem;
        }
        
        .page-bd ul li input {
            height: .5333rem;
            line-height: .5333rem;
            width: 100%;
            border: .0133rem solid #ccc;
            border-radius: .08rem;
            padding: .1333rem;
            background-color: #fff;
            color: #7c7c7c;
        }
        
        .res-search {
            position: relative;
        }
        
        .res-search a {
            position: absolute;
            top: .0533rem;
            right: .0533rem;
            width: .4267rem;
            height: .4267rem;
        }
        
        .res-search a img {
            width: 100%;
            height: 100%;
        }
        
        .header .header-right a img {
            width: .3733rem;
            height: .3733rem;
        }
    </style>

    <title>探访记录发起单 - 孝邻会</title>
</head>

<body>
    <!-- 整体页面部分 -->
    <div class="page">
        <!-- 页面头部 -->
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">探访记录发起单 - 孝邻会</div>
                <div class="header-right">
                    <a href="#">
                        <img src="../../static/assets/images/res/13.png" alt="">
                    </a>
                </div>
            </div>
        </div>

        <!-- 页面内容-->
        <div class="page-bd">
            <form id="userform">
                <ul>
                    <li class="res-search">
                        <input type="text" name="targetUserId" placeholder="被探访会员ID" />
                    </li>
                    <li><input type="text" placeholder="探访发起人" value="本人" readonly /></li>
                    <li><input type="number" name="visitNums" placeholder="探访人数" /></li>
                    <li><input type="text" name="visitors" placeholder="同行小组成员" /></li>
                    <li><input type="text" name="chair" placeholder="主持人" /></li>
                    <li><input type="text" name="company" placeholder="探访企业名称" /></li>
                    <li>
                        <input type="text" placeholder="探访时间，请选择 >" name="visitTime" readonly class="fs28 color_3 fw_b" id="nowValue">
                    </li>
                    <li><input type="text" name="subject" placeholder="探访主题" /></li>
                    <li>
                        <div class="weui-cells weui-cells_form card-box">
                            <div class="weui-cell">
                                <div class="weui-cell__bd">
                                    <textarea class="weui-textarea" name="content" oninput="contentnum(this)" maxlength="200" placeholder="请详细记录您的探访笔记" rows="6"></textarea>
                                    <div class="weui-textarea-counter"><span id="length">0</span>/200</div>

                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                         <div class="uploading" style="display: block; " >
                            <div class="title fs28 fw_b color_3">上传探访表、记录时光</div>
                            <div class="uploadBox" style="flex-wrap: wrap;overflow: initial;display: flex;">
                                <ul class="weui-uploader__files uploaderFiles" id="uploaderFiles1">
                                </ul>
                                <form enctype="multipart/form-data" id="uploadForma">
                                <div class="Box">
                                    <img src="../../static/mobile/default/images/addImg.png" alt="" class="imgBox">
                                        <input id="uploadInput" onchange="uploadFile(this,event)" class="weui-uploader__input"
                                               type="file"
                                               accept="image/*" multiple="">
                                    <input type="hidden" value="" id="picUrl" name="picUrl">
                                </div>
                                </form>
                                <div ></div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="weui-btn-area">
                            <a href="javascript:;" onclick="enterpost()" class="weui-btn weui-btn_primary">提交</a>
                        </div>
                    </li>
                </ul>
            </form>
        </div>
        <!-- 版权 -->
        <div class="copyright">
            Copyright © 达漂亮<br>
        </div>

    </div>

    <!-- alert弹窗部分 -->
    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>

    <!-- 脚本文件 -->
    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>
    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>

    <script src="../../static/mobile/default/js/datePicker.js"></script>
    <script src="../../static/mobile/default/js/picker.min.js"></script>

    <script src="../../static/mobile/default/js/uploadsimage.js?v=1"></script>

    <!-- 页面js部分 -->
    <script>
        //处理点击改变的调用函数-做IOS兼容
        $(_listenSelector).click(function(){
            var that = $(this);

            _uplocalfunction=function(base64Img){
                fd.append("qrcodefile", base64Img);
                $(that).parent().before('<div class="Box"><img src="'+base64Img+'" alt="" class="imgBox payimg"><img src="../../static/mobile/default/images/closeImg.png" alt="" class="closeImg" data-type="one"></div>');
                $('#upload_qrcode_box').css('visibility','hidden');
                //$(_listenSelector).hide();
            }

        })
    </script>
    <script>
        //==计算数字
        function contentnum(obj) {
            var length = $(obj).val().length;
            $('#length').text(length)
        }

        //==日期选择器
        function demoClick() {
            var nowValue = document.getElementById('nowValue');
            new DatePicker({
                "type": "3", //0年, 1年月, 2月日, 3年月日
                "title": '请选择日期', //标题(可选)
                "maxYear": "", //最大年份（可选）
                "minYear": "", //最小年份（可选）
                "separator": "-", //分割符(可选)
                "defaultValue": nowValue.value, //默认值（可选）
                "callBack": function(val) {
                    //回调函数（val为选中的日期）
                    nowValue.value = val;
                }
            });
        }

        var fd = new FormData();
        var imgNum = 0;

        //选择上传图片
        function uploadFile(_this,e){

            var formData = new FormData($("#uploadForma")[0])  //创建一个forData
            formData.append('file', $('#uploadInput')[0].files[0]) //把file添加进去  name命名为img
            $.ajax({
                url: 'https://mp.jianguoes.com/api/mp/upload',
                data: formData,
                type: "POST",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {

                    if (data.errno != 0) {
                        _alert(data.errmsg);
                        return false;
                    }

                    imgNum++;
                    if(imgNum > 3){
                        _alert("最多只能上传3张照片");
                        return false;
                    }
                    fd.append("imgfile["+imgNum+"]", data.data);
                    $('#uploaderFiles1').before('<div class="Box"><img src="'+ data.data+'" alt="" class="imgBox payimg"><img src="../../static/mobile/default/images/closeImg.png" alt="" data-imgnum="'+imgNum+'" class="closeImg"></div>');
                },
                error: function () {
                    //失败
                }

            });
        }

        //确认上传
        var enter = 0;
        function enterpost() {
            if (enter > 0) {
                $.alert('请不要重复提交');
            }

            var picUrl = '';
            for(var [key, value] of fd.entries()){
                if(picUrl.length > 0){
                    picUrl = picUrl + "," + value;
                }else{
                    picUrl = value;
                }
            }
            $('#picUrl').val(picUrl);

            var data = $('#userform').toJson();
            enter = 1;
            $.ajax({
                type: "post",
                url: "https://mp.jianguoes.com/api/res/addVisit",
                contentType: "application/json",
                data: JSON.stringify(data),
                headers: {
                    token: $.cookie('code')
                },
                success: function(data) {
                    console.log(data)
                    if (data.errno != 0) {
                        $.alert(data.errmsg);
                        enter = 0;
                        return;
                    }
                    window.location.href = 'visitlist.html';
                },
                error: function() {
                    enter = 0;
                },
            })
        }
    </script>

    <!-- 启动加载 -->
    <script>
        $(function() {
            // 解决移动端浏览器 300 毫秒点击延迟问题
            FastClick.attach(document.body);

            $('#nowValue').on('click', function() {
                demoClick()
            })
        });
    </script>
</body>

</html>